<!-- 文章评论 -->
<template>
  <div class="comment-popup">
    <van-field class="comment-input"
        v-model.trim="message"
        maxlength='100'
        show-word-limit
        autosize
        type="textarea"
        placeholder="评论千万条，友善第一条"
    />
    <van-button class="release-comment-btn"
                @click="onPostComment"
                :disabled='!message'
    >发布</van-button>
  </div>
</template>

<script>
import { postComment } from '@/api/comment.js'
export default {
  name: 'CommentPost',
  props: {
    articleId: {
      type: [String, Number, Object],
      required: true
    },
    art_id: {
      type: [String, Number, Object],
      default: null
    }
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    async onPostComment () {
      try {
        const res = await postComment({
          target: this.articleId,
          content: this.message,
          art_id: this.art_id
        })
        console.log(res)
        this.$toast.success('发布成功')
        // 清空文本框
        this.message = ''
        // 视图更新
        this.$emit('postSuccess', res.data.data.new_obj)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style  scoped>

</style>
